<!DOCTYPE html>
<html>
<head>
    <title>Adiabatic Gas Oscillation</title>
    <style>
        body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; }
        canvas { background-color: white; border: 1px solid #ccc; }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style and general settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2.5;
        ctx.lineCap = 'butt';

        // --- Geometry Parameters ---
        const centerX = canvas.width / 2;
        const yBottom = 360;
        const bottleWidth = 160;
        const bottleSideHeight = 130;
        const shoulderHeight = 30;
        const cornerRadius = 15;

        const neckOuterWidth = 100;
        const neckInnerWidth = 50;
        const rimHeight = 10;
        
        const ballRadius = 12;
        const tubeHalfWidth = ballRadius + 2; // Distance from center to tube wall

        // --- Drawing ---

        // 1. Draw Jar/Bottle
        const ySideTop = yBottom - bottleSideHeight;
        const yNeckTop = ySideTop - shoulderHeight;
        const xLeft = centerX - bottleWidth / 2;
        const xRight = centerX + bottleWidth / 2;
        const xNeckLeftOuter = centerX - neckOuterWidth / 2;
        const xNeckRightOuter = centerX + neckOuterWidth / 2;

        ctx.beginPath();
        // Bottom and right side
        ctx.moveTo(xLeft + cornerRadius, yBottom);
        ctx.lineTo(xRight - cornerRadius, yBottom);
        ctx.arcTo(xRight, yBottom, xRight, yBottom - cornerRadius, cornerRadius);
        ctx.lineTo(xRight, ySideTop);
        // Right shoulder
        ctx.quadraticCurveTo(xRight, yNeckTop, xNeckRightOuter, yNeckTop);
        // Left shoulder (drawn separately to create the opening)
        ctx.moveTo(xNeckLeftOuter, yNeckTop);
        ctx.quadraticCurveTo(xLeft, yNeckTop, xLeft, ySideTop);
        ctx.lineTo(xLeft, yBottom - cornerRadius);
        // Bottom left corner
        ctx.arcTo(xLeft, yBottom, xLeft + cornerRadius, yBottom, cornerRadius);
        ctx.stroke();

        // 2. Draw Jar Rims (filled rectangles)
        const yRimTop = yNeckTop - rimHeight;
        const xNeckLeftInner = centerX - neckInnerWidth / 2;
        const xNeckRightInner = centerX + neckInnerWidth / 2;

        ctx.fillRect(xNeckLeftOuter, yRimTop, xNeckLeftInner - xNeckLeftOuter, rimHeight);
        ctx.fillRect(xNeckRightInner, yRimTop, xNeckRightOuter - xNeckRightInner, rimHeight);

        // 3. Draw Tube and Ball
        const tubeBottomY = yNeckTop + 10;
        const ballCenterY = yRimTop - 45;
        
        const tubeLeftX = centerX - tubeHalfWidth;
        const tubeRightX = centerX + tubeHalfWidth;
        
        const holderTopY = ballCenterY - ballRadius;
        const holderBottomY = ballCenterY + ballRadius;

        // Draw the tube/holder assembly
        ctx.beginPath();
        // Left vertical line
        ctx.moveTo(tubeLeftX, tubeBottomY);
        ctx.lineTo(tubeLeftX, holderTopY);
        // Right vertical line
        ctx.moveTo(tubeRightX, tubeBottomY);
        ctx.lineTo(tubeRightX, holderTopY);
        
        // Small horizontal lines at the top of the holder, as in the diagram
        ctx.moveTo(tubeLeftX, holderTopY);
        ctx.lineTo(tubeLeftX - 5, holderTopY);
        ctx.moveTo(tubeRightX, holderTopY);
        ctx.lineTo(tubeRightX + 5, holderTopY);

        ctx.stroke();

        // Draw the ball, sitting between the holder lines
        ctx.beginPath();
        ctx.arc(centerX, ballCenterY, ballRadius, 0, 2 * Math.PI);
        ctx.stroke();

        // 4. Draw Label
        ctx.font = "24px 'Times New Roman', serif";
        ctx.textAlign = 'center';
        ctx.fillText("Fig. 1.6.", centerX, yBottom + 45);

    </script>
</body>
</html>